<template>
  <el-dialog :visible.sync="dialog" width="480px" :close-on-click-modal="false" :before-close="reset">
    <span slot="title" class="dialog-title">分配用户 <el-tag type="danger">{{ row.roleName }}</el-tag></span>
    <div class="dialog_info">
      <el-checkbox-group v-model="usersItem">
        <div v-for="user in usersList" :key="user.id" class="item">
          <el-checkbox :label="user.id">{{ user.realName }}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getUsers, addUpdateRoles, getusersByrole } from '@/api/roles'
export default {
  name: 'DialogsetUser',
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      usersItem: [],
      usersList: []
    }
  },
  watch: {
    dialog(dialog) {
      if (dialog) {
        const data = {
          page: 1,
          pageSize: 9999,
          status: 1
        }
        getUsers(data).then(res => {
          this.usersList = res.data.row.map(item => ({ id: item.id, realName: item.realName }))
        })
        getusersByrole({ roleId: this.row.id }).then(res => {
          this.usersItem = res.data.map(item => (item.id))
        })
      }
    }
  },
  methods: {
    reset() {
      this.$emit('reset', 'dialogsetUser')
    },
    submit() {
      const data = {
        id: this.row.id,
        userStrs: this.usersItem.join(',')
      }
      addUpdateRoles(data).then(res => {
        if (res.code * 1 === 200) {
          this.$message({
            message: `绑定成功`,
            type: 'success',
            showClose: true
          })
          this.$emit('submit', 'dialogsetUser')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog_info {
  .el-input,
  .el-select {
    width: 220px;
  }
  .item {
    padding: 10px 0 0 40px;
  }
}
</style>

